<template>
    <div>
      <van-search
        v-model="searchPage.keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="cancel"
      >
      </van-search>

      <van-dropdown-menu>
        <van-dropdown-item v-model="category" :options="optionCategory" />
        <van-dropdown-item v-model="sort" :options="optionSort" />
        <van-dropdown-item v-model="screen" :options="optionScreen" />
      </van-dropdown-menu>

      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :offset="10"
        finished-text="没有更多了"
        :immediate-check="false"
      >
        <div v-for="item in shopList">
          <van-card
            :desc="item.introduction"
            :title="item.name"
            :thumb="item.iconUrl"
          >
            <div slot="tags">
              <p>{{item.tags}}</p>
            </div>
            <div slot="price" class="price">
              <van-rate :value="item.remarkScore" size="10" readonly />
              <span class="shopRemarkScore">{{item.remarkScore}}</span>
              <span class="shopPersonPrice">{{item.pricePerMan}}/人</span>
            </div>
            <div slot="bottom">
              <p>{{item.address}}<span class="distance">{{item.distance}}</span></p>
            </div>
            <div slot="footer">
              <van-button size="mini">进入</van-button>
            </div>
          </van-card>
        </div>
      </van-list>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import {list} from "@/api/category";
    import {getUrl} from "@/api/file";
    import {recommend, searchEs} from "@/api/search";
    export default {
        name: "index",
        data() {
          return {
            category: 0,
            sort:0,
            screen:0,
            categoryList:[],
            optionCategory: [{text: '全部分类', value: 0}],
            optionSort: [
              {text: '智能排序', value: 0},
              {text: '距离优先', value: 'distance'},
              {text: '好评优先', value: 'remarkScore'},
              {text: '低价优先', value: 'lowPrice'},
              {text: '高价优先', value: 'highPrice'},
            ],
            optionScreen: [{text: '筛选', value: 0}],
            // 商品相关
            searchPage:{
              page: 1,
              size: 5,
              longitude:"",
              latitude:"",
              keyword:this.$route.query.input,
            },
            shopList:[],
            totalCount:0,
            loading: false,
            finished: false,
          }
        },
      mounted() {
        if (sessionStorage.getItem('location')){
          let location =JSON.parse(sessionStorage.getItem('location'));
          this.searchPage.longitude=location.longitude;
          this.searchPage.latitude=location.latitude;
          this.loadCategory();
          this.onSearch();
        }else{
          Toast("请先选择地理位置");
        }
      },
      methods:{
          onSearch(){
            this.shopList=[];
            this.getShopList()
          },
          cancel(){
            this.$router.go(-1)
          },
          loadCategory(){
            list().then((response) => {
              this.categoryList= response.data;
              this.categoryList.forEach(category=>{
               this.optionCategory.push({text: category.name, value: category.id})
              })
            });
          },
          onSwitchCategoryChange({ detail }) {
            alert(detail);
            this.category=detail;
          },
          getShopList(){
            searchEs(this.searchPage).then((response) => {
              if(response.data.pageList.length===0){
                this.finished = true;
              }
              response.data.pageList.forEach(shop=>{
                // 距离计算
                if(shop.distance < 1000)
                  shop.distance=shop.distance+"m";
                else if(shop.distance > 1000)
                  shop.distance=(Math.round(shop.distance/100)/10).toFixed(1) + "km";
                // 图片加载
                getUrl(shop.iconUrl).then((response) => {
                  shop.iconUrl = response.data;
                })
              });
              this.shopList=this.shopList.concat(response.data.pageList);
              this.totalCount = response.data.totalCount;
              this.loading = false;
            }).catch((response) => {
              console.log(response);
            });
          },
          onLoad(){
            this.searchPage.page++;
            this.getShopList();
          }
      }
    }
</script>

<style scoped>

</style>
